<template>
    <div>
      <table>
        <el-row>
          <el-col :span="50">
            <el-table :data="tableMaterialData" border style="width: 100%" max-height="250" @selection-change="handleMatSelectionChange" :default-sort="{prop: 'vendorCode', order: 'descending'}">
              <el-table-column type="selection" width="60"></el-table-column>
              <el-table-column prop="materialNo" align="center" label="物料编码" width="150"></el-table-column>
              <el-table-column prop="materialName" align="center" label="物料名称" width="300"></el-table-column>
              <el-table-column prop="sampleNumber" align="center" label="打样数量" width="150"></el-table-column>
              <el-table-column prop="unit" align="center" label="计量单位" width="150"></el-table-column>
            </el-table>
          </el-col>
          <el-col :span="30" style="margin-left:60px">
            <el-table :data="tableVendorData" border style="width: 100%" max-height="250" @selection-change="handleVendorSelectionChange" :default-sort="{prop: 'vendorCode', order: 'descending'}">
              <el-table-column type="selection" width="60"></el-table-column>
              <el-table-column prop="vendorCode" align="center" label="供应商编码" width="150"></el-table-column>
              <el-table-column prop="vendorName" align="center" label="供应商名称" width="300"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <div class="el_submit">
            <el-button type="primary" @click="addMapping" style="margin-bottom:10px">关联</el-button>
            <el-button type="primary" @click="deleteMapping" style="margin-bottom:10px">解除关联</el-button>
          </div>
        </el-row>
        <el-row style="margin-top:10px">
          <el-table :data="dataMatVendor" border style="width: 100%" max-height="250" @selection-change="handleMappingSelectionChange" :default-sort="{prop: 'vendorCode', order: 'descending'}">
            <el-table-column type="selection" width="60"></el-table-column>
            <el-table-column prop="materialNo" align="center" label="物料编码" width="150"></el-table-column>
            <el-table-column prop="materialName" align="center" label="物料名称" width="300"></el-table-column>
            <el-table-column prop="sampleNumber" align="center" label="打样数量" width="150"></el-table-column>
            <el-table-column prop="unit" align="center" label="计量单位" width="150"></el-table-column>
            <el-table-column prop="vendorCode" align="center" label="供应商编码" width="250"></el-table-column>
            <el-table-column prop="vendorName" align="center" label="供应商名称" width="330"></el-table-column>
          </el-table>
        </el-row>
      </table>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        // 初始化表格数据
        tableMaterialData: [],
        tableVendorData: [],
        multipleMatSelection: [],  // 当前物料选中行数据
        multipleVendorSelection: [], //当前供应商选中行数据
        multipleMappingSelection: [], //当前mapping行数据
      };
    },
    // 子组件接收参数
    props:['dataVendorList','dataMaterialList','dataMatVendor'],
    watch:{ // 监听参数dataList数据变化
      // 监听供应商数据变化
      'dataVendorList':function (val) {
        this.tableVendorData = val 
        this.multipleVendorSelection = val 
        this.addMapping();
      },
      // 监听物料数据数据变化
      'dataMaterialList':function (val) {
        this.tableMaterialData = val;
        this.multipleMatSelection = val;
        this.addMapping();
      }
    },
    created(){
      this.tableVendorData = this.dataVendorList;
      this.tableMaterialData = this.dataMaterialList;
      this.multipleVendorSelection = this.dataVendorList;
      this.multipleMatSelection = this.dataMaterialList;
      this.addMapping();
    },
    methods: {
      // 添加映射关系
      addMapping() {
        this.multipleMatSelection.forEach(mat => {
          this.multipleVendorSelection.forEach((vendor,i) => {
            if(this.dataMatVendor.length > 0){
              let isContain = false;
              this.dataMatVendor.forEach(element=>{
                if(element.vendorCode === vendor.vendorCode && element.materialNo === mat.materialNo){
                  isContain = true;
                }
              })
              if(!isContain){
                this.dataMatVendor.push({
                  materialNo: mat.materialNo,
                  materialName: mat.materialName,
                  sampleNumber: mat.sampleNumber,
                  unit: mat.unit,
                  vendorId: vendor.id, 
                  vendorCode: vendor.vendorCode,
                  vendorName: vendor.vendorName,
                  index:this.dataMatVendor.length + i
                })
              }
            } else {
              this.dataMatVendor.push({
                materialNo: mat.materialNo,
                materialName: mat.materialName,
                sampleNumber: mat.sampleNumber,
                unit: mat.unit,
                vendorId: vendor.id, 
                vendorCode: vendor.vendorCode,
                vendorName: vendor.vendorName,
                index:this.dataMatVendor.length + i
              })
            }
          });
        });
      },
      // 解除映射关系
      deleteMapping() {
        this.multipleMappingSelection.forEach(val => {
           this.dataMatVendor.splice(val, 1);
        })
      },
      // 监控物料列表
      handleMatSelectionChange(array){
        this.multipleMatSelection = array;
      },
      // 监控供应商列表
      handleVendorSelectionChange(array){
        this.multipleVendorSelection = array;
      },
       // 监控供应商列表
      handleMappingSelectionChange(data){
        this.multipleMappingSelection=[];
        data.forEach(val=>{
          this.multipleMappingSelection.push(val.index) 
        })
      }
    }
  }
</script>
